
<title>用户角色</title>

<link href="../../../../Content/wdtree/tree.css" rel="stylesheet" />
<script src="../../../../Content/wdtree/tree.js"></script>

<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>平台管理</cite></a>
        <a><cite>用户角色</cite></a>
    </div>
</div>


<div id="role-app" class="layui-fluid" v-cloak>
    <div class="layui-inline">
        <div class="layui-btn-group">
            <button :class="{'layui-btn layui-btn-sm layui-btn-disabled':Disabled(),'layui-btn layui-btn-sm':!Disabled()}" v-bind:disabled="Disabled()" v-on:click="Edit"><i class="fa fa-pencil-square-o"></i>  修改</button>
            <button :class="{'layui-btn layui-btn-sm layui-btn-disabled':Disabled(),'layui-btn layui-btn-sm':!Disabled()}" v-bind:disabled="Disabled()" v-on:click="Delete"><i class="fa fa-trash-o"></i>  删除</button>
            <button class="layui-btn layui-btn-sm" v-on:click="Open('editInfo','添加')"><i class="fa fa-plus"></i>  添加</button>
        </div>
        <div class="layui-inline">
            <div class="layui-input" style="height:30px;">
                <input id="txt_keyword" type="text" placeholder="名称" class="layui-block" style="width:200px;height:28px;line-height:28px;border:none;vertical-align:middle;" v-model="SearchModel.keyword">
                <button id="btn_search" type="button" class="layui-btn" v-on:click="Search" style="height:28px;line-height:28px;vertical-align:middle;"><i class="fa fa-search"></i></button>
            </div>
        </div>
    </div>
    <table class="table table-hover layui-table">
        <thead>
            <tr>
                <th style="width:20px;"></th>
                <th>角色编号</th>
                <th>角色名称</th>

                <!--<th>显示顺序</th>-->
                <th>创建时间</th>
                <th>备注</th>
                <th>状态</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item,index) in Models" :class="{'selected':SelectedModel == item}" v-on:click="SelectRow(item)">
                <td>{{ GetOrdinal(index) }}</td>
                <td>{{ item.EnCode }}</td>
                <td>{{ item.Name }}</td>
                <td>{{ item.CreationTime|yyyy_mm_dd_hh_mm_ss }}</td>
                <td>{{ item.Description }}</td>
                <td><switchbutton v-bind:value="item.IsEnabled" v-bind:text="item.IsEnabled?'启用':'禁用'"></switchbutton></td>
            </tr>

        </tbody>
        <tfoot is="ling-footer" v-bind:options="PageOptions" v-on:change="ToPage"> </tfoot>
    </table>
    <form id="role-dailog" v-show="false" class="layui-form" style="padding:20px;" v-cloak>
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
                <li class="layui-this">角色管理</li>
                <li>权限设置</li>
            </ul>
            <div class="layui-tab-content" style="height: 100px;">
                <div class="layui-tab-item layui-show">
                    <!--<div class="layui-form-item"></div>-->
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">角色编号</label>
                            <div class="layui-input-inline">
                                <input id="EnCode" name="EnCode" type="text" lay-verify="required" class="layui-input" placeholder="请输入角色编号" v-model="Model.EnCode" />
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">角色名称</label>
                            <div class="layui-input-inline">
                                <input id="FullName" name="Name" type="text" lay-verify="required" class="layui-input" placeholder="请输入角色名称" v-model="Model.Name" />
                            </div>
                        </div>


                    </div>
                    <div class="layui-form-item">

                        <div class="layui-inline">
                            <label class="layui-form-label">选项</label>
                            <div class="layui-input-inline">
                                <switchbutton v-bind:value="Model.IsEnabled" v-on:change="ChangeStatus" v-bind:text="Model.IsEnabled?'启用':'禁用'"></switchbutton>
                            </div>
                        </div>

                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">备注</label>
                        <div class="layui-input-block">
                            <textarea id="Description" name="Description" class="layui-textarea" style="width: 514px;resize:none;" v-model="Model.Description"></textarea>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit="" lay-filter="save">保存</button>
                        </div>
                    </div>

                </div>
                <div class="layui-tab-item">
                    <div class="layui-form-item">
                        <div id="permissionTree"></div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit="" lay-filter="save">保存</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </form>
</div>

<script>

    layui.use(['admin', 'laypage', 'table', 'form', 'laydate', 'ling'], function () {
        var $ = layui.$;
        var table = layui.table;
        var laypage = layui.laypage;
        var form = layui.form;
        var ling = layui.ling;
        var laydate = layui.laydate;
        var dialogIndex;

        var app = $('#role-app').Grid({
            SearchUrl: "/SystemManage/Role/GetModels"
            , DeleteUrl: "/SystemManage/Role/Delete"
            , EditUrl: "/SystemManage/Role/Update"
            , AddUrl: "/SystemManage/Role/Add"
            //, OptionsUrl: ["/SystemManage/Role/GetAllRoles"] //级联数据
            , DialogConfig: function (key) {
                return {
                    title: app.Title,
                    area: ['704px', '714px'], //宽高
                    content: $("#role-dailog"),
                    opened: function (index) {
                        dialogIndex = index;

                        $("#permissionTree").html(null);
                        $("#permissionTree").treeview({
                            height: 444,
                            showcheck: true,
                            url: "/SystemManage/RoleAuthorize/GetPermissionTree",
                            param: { roleId: app.Model.Id },
                            cbiconpath: "../../../../Content/wdtree/images/icons/"
                        });



                    }
                };
            }
            , updated: function () {

                form.render();
            }

        });
        ////监听提交
        form.on('submit(save)', function (data) {

            var permissionIdArr = $("#permissionTree").getCheckedNodes();
            var permissionIds = "";
            var c = "";
            for (var i = 0; i < permissionIdArr.length; i++) {
                permissionIds += c + permissionIdArr[i];
                c = ",";
            }
            app.Model.permissionIds = permissionIds;


            var code = app.Save();
            if (code == 0 && dialogIndex)
                layer.close(dialogIndex);
            return false;
        });

    });
</script>
